<template>
	<view class="container">
		<scroll-view class="emoji-box" scroll-y="true" scroll-with-animation="true">
			<view class="emoji">
				<view class="emoji-row">
					<view class="emoji-cl" v-for="(item,index) in emojis" :key="index" @mousedown.prevent="send(index)">
						{{item}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="delete">
			<image @mousedown.prevent="del_back" class="del-btn" src="../../static/images/cheat/delete.png" mode="">
			</image>
			<!-- <view >删除</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "emoji",
		data() {
			return {
				emojis: [
					'😀', '😁', '😂', '🤣', '😎', '😋', '😊', '😉',
					'😆', '😅', '😄', '😥', '😣', '😏', '🙄', '😶',
					'😛', '😌', '😴', '😫', '😪', '😯', '🤐', '😮',
					'😑', '😐', '🤔', '🤗', '🙂', '😚', '😙', '😗',
					'😦', '😭', '😢', '😤', '😟', '😞', '😖', '🙁',
					'😨', '😲', '🤑', '🙃', '😕', '😔', '😓', '😒',
					'😘', '😱', '😰', '😬', '😩', '🤤', '😝', '😜',
				]

			};
		},
		methods: {
			send(i) {
				// console.log(this.emojis[i][j]);
				this.$emit("emojiIndex", this.emojis[i])
			},
			del_back() {
				// this.emojis.forEach(item => {
				// 	console.log(item.length);
				// })
				this.$emit('del_back')
			}
		}
	}
</script>

<style lang="scss">
	.emoji-box {
		height: 500rpx;

		// padding-bottom: 160rpx;
		.emoji {
			padding-bottom: 80rpx;
		}
	}

	.container {
		z-index: 999;
		height: 100%;

		// background-color: #4e4e4e;
		// padding-bottom: 150rpx;
		// position: relative;
		.delete {
			height: 100rpx;
			width: 150rpx;
			z-index: 9;
			background-color: #fff;
			position: absolute;
			bottom: 20rpx;
			border-radius: 14rpx;
			box-shadow: 2rpx 2rpx 20rpx;
			right: 20rpx;

			.del-btn {
				height: 68rpx;
				position: absolute;
				width: 68rpx;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

			}
		}

		.emoji-row {
			// height: 50rpx;
			display: flex;
			justify-content: start;
			flex-wrap: wrap;
			padding: 6rpx 10rpx;

			.emoji-cl {
				width: 84rpx;
				font-size: 60rpx;
				padding: 4rpx;
				// height: 50rpx;
			}
		}
	}
</style>